<template>
  <div>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="name" label="项目名称" width="180"/>
    <el-table-column prop="level1" label="水平1" width="100">
      <template slot-scope="scope">
        <el-select v-model="scope.row.level1" placeholder="请选择" disabled>
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </template>
    </el-table-column>
    <el-table-column prop="level2" label="水平2" width="100">
      <template slot-scope="scope">
        <el-select v-model="scope.row.level2" placeholder="请选择" disabled>
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </template>
    </el-table-column>
  </el-table>
  <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />
  </div>
</template>

<script>
export default {
  name: 'decimalPlaces',
  data() {
    return {
      options: [],
      tableData: [],
      total: 2,
      pageNum: 1,
      pageSize: 20
    }
  },
  created() {
    this.getOptions()
    this.getData()
  },
  methods: {
    getOptions() {
      let options = [{
        value: '选项1',
        label: '1'
      }, {
        value: '选项2',
        label: '2'
      }, {
        value: '选项3',
        label: '3'
      }, {
        value: '选项4',
        label: '4'
      }]
      this.options = options
    },
    getData() {
      let row1 = {
        name: 'CRP',
        level1: '选项2',
        level2: '选项2'
      }
      let row2 = {
        name: 'SAA',
        level1: '选项2',
        level2: '选项2'
      }
      this.tableData.push(row1, row2)
    }
  }
}
</script>
